<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import { vw, vh } from '@/utils/viewSize'
import { my } from 'element-plus/lib/locale/index.js'
const lineChartRef = ref()
const pieChartRef = ref()
const data: Array<[string, number, number, number, number, number, number, number]> = [
  ['2022年', 11, 22, 312, 152, 172, 62, 27],
  ['2023年', 43, 62, 112, 352, 272, 312, 127],
  ['2024年', 101, 202, 312, 152, 172, 62, 27]
]
//定时改变
var now = 0
var number = 0
const startChange = () => {
  setInterval(() => {
    resizeData(now)
    now = (now + 1) % 3
    console.log('当前标题', nowTitile.value)
    console.log('当前数据', nowData.value)
  }, 4000)
}

var nowTitile = ref('2022年')
var nowData = ref([11, 22, 312, 152, 172, 62, 27])
const resizeData = (index: number) => {
  nowTitile.value = data[index][0] as string
  let arr = data[index].filter((item, index) => {
    if (index != 0) return item as number
  })
  nowData.value = arr as number[]
}

const initChart = () => {
  var lineChart = echarts.init(lineChartRef.value)
  lineChart.setOption({
    grid: {
      top: '12%',
      bottom: '12%',
      left: '5%',
      right: '5%',
      containLabel: true
    },
    legend: {
      // data: nowTitile.value,
      lwft: '50%',
      top: '10%',
      itemWidth: 7,
      itemHeight: 7,
      textStyle: {
        color: '#5CB1C1'
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLabel: {
        color: '#61B9C8',
        fontSize: vw(10)
      },
      axisLine: {
        symbol: ['none', 'arrow'],
        symbolSize: [6, 6],
        symbolOffset: [0, 5],
        lineStyle: {
          color: '#122C49'
        }
      },
      axisTick: {
        color: '#122C49',
        inside: true
      },
      z: 2,
      data: ['金融类', '互联网类', '医疗类', '电商类', '服装类', '食品类', '居家类']
    },
    yAxis: {
      type: 'value',
      interval: 50,
      min: 0,
      max: 400,
      splitNumber: 7,
      axisLine: {
        symbol: ['none', 'arrow'],
        symbolSize: [6, 6],
        lineStyle: {
          color: '#122C49'
        }
      },
      axisLabel: {
        color: '#61B9C8',
        showMaxLabel: false,
        fontSize: 10
      },
      splitLine: {
        show: false
      },
      name: '(个)',
      nameGap: -10,
      nameTextStyle: {
        color: '#61B9C8',
        fontSize: 9,
        align: 'right',
        padding: [0, 6, 0, 0]
      }
    },
    tooltip: {
      //坐标轴触发
      trigger: 'axis',
      showContent: false,
      axisPointer: {
        //阴影指示器
        type: 'shadow',
        shadowStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 1,
              color: 'rgba(254, 50, 223, 0.565)'
            },
            {
              offset: 0,
              color: 'rgba(255, 255, 255, 0)'
            }
          ])
        }
      }
    },
    series: [
      {
        name: nowTitile.value,
        type: 'line',
        symbol: 'none',
        smooth: true,

        data: nowData.value,
        emphasis: {
          label: {
            show: true,
            color: '#fff',
            fontSize: vw(12)
          },

          itemStyle: {
            color: '#5d83ff',
            borderColor: '#fff',
            borderWidth: vw(5),
            opacity: 1
          }
        },
        lineStyle: {
          width: 1,
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#B21356' // 0% 处的颜色
              },
              {
                offset: 0.5,
                color: '#B21356' // 40% 处的颜色
              },
              {
                offset: 1,
                color: '#F59111' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          } //背景渐变色
        },
        itemStyle: {
          color: 'rgb(212,37,43)'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#A41B68' // 0% 处的颜色
              },
              {
                offset: 0.5,
                color: 'rgba(112,20,82,1)' // 40% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(112,20,82,0)' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }, //背景渐变色
          origin: 'start'
        }
      }
    ]
  })

  startChange()
  var pieChart = echarts.init(pieChartRef.value)
  pieChart.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      show: false
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        z: 3,
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          borderRadius: 10
        },
        label: {
          show: true,
          position: 'center',
          formatter: '{b}: {d}%',
          fontSize: vw(10)
        },
        emphasis: {
          label: {
            show: true,
            fontSize: vw(20),
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: nowData.value
      }
    ]
  })
  window.addEventListener('resize', () => {
    lineChart.resize()
    pieChart.resize()
  })
  let timer = setInterval(() => {
    lineChart.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: number
    })

    number++

    if (number > 7) {
      number = 0
    }
  }, 1000)
  const dataTitile = ['金融类', '互联网类', '医疗类', '电商类', '服装类', '食品类', '居家类']
  watch(
    nowData,
    () => {
      console.log('变！?')

      lineChart.setOption({
        series: [
          {
            // 指定要更新的系列
            name: nowTitile.value,
            data: nowData.value // 新数据
          }
        ]
      })
      pieChart.setOption({
        series: [
          {
            // 指定要更新的系列
            name: nowTitile.value,
            data: dataTitile.reduce((pre: Array<any>, key, index) => {
              pre.push({ name: key, value: nowData.value[index] })
              return pre
            }, [])
          }
        ]
      })
    },
    { deep: true }
  )
}
onMounted(() => {
  initChart()
})
</script>
<template>
  <div class="box">
    <div class="pieChart" ref="pieChartRef"></div>
    <div class="lineChart" ref="lineChartRef"></div>
  </div>
</template>
<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  position: relative;
}
.lineChart {
  width: 100%;
  height: 100%;
  position: relative;
}
.pieChart {
  position: absolute;

  right: 0;
  top: 0;
  width: 40%;
  height: 40%;
}
</style>
